<template>
  <div class="sy">
    <div class="hed">
      <select>
        <option>京北画室（昌平画室）…</option>
        <option>京北画室（昌平画室）…</option>
        <option>京北画室（昌平画室）…</option>
      </select>
        <input type="text" placeholder="搜索商家、商品名称">
    </div>
    <div class="nav">
      <ul>
        <li>
          <img src="../assets/xiaot/1.png" alt="">
          <p>美食</p>
        </li>
        <li>
          <img src="../assets/xiaot/2.png" alt="">
          <p>美食</p>
        </li>
        <li>
          <img src="../assets/xiaot/3.png" alt="">
          <p>美食</p>
        </li>
        <li>
          <img src="../assets/xiaot/4.png" alt="">
          <p>美食</p>
        </li>
        <li>
          <img src="../assets/xiaot/5.png" alt="">
          <p>美食</p>
        </li>
        <li>
          <img src="../assets/xiaot/6.png" alt="">
          <p>美食</p>
        </li>
        <li>
          <img src="../assets/xiaot/7.png" alt="">
          <p>美食</p>
        </li>
        <li>
          <img src="../assets/xiaot/8.png" alt="">
          <p>美食</p>
        </li>
         <li>
          <img src="../assets/xiaot/1.png" alt="">
          <p>美食</p>
        </li>
        <li>
          <img src="../assets/xiaot/2.png" alt="">
          <p>美食</p>
        </li>
      </ul>
    </div>
    <div class="zi">
      <dl>
        <dd>
          <h4>蚂蚁钻石会员</h4>
          <h2>免费享准时达PLUS 超时赔现金></h2>
        </dd>
        <dt><img src="../assets/zuan.png" alt=""></dt>
      </dl>
    </div>
    <div class="hint">
        — 推荐商家 —
    </div>
    <div class="merchant">
      <dl>
        <dt><img src="@/assets/mian.png"></dt>
        <dd>
          <h4>田园面馆（秦观岛店）<span>外卖</span></h4>
          <p>45分钟送达</p>
          <p>起送价￥38|配送费￥0 <i>x</i><span>月售8203</span></p>
          <p>折扣商品6折起</p>
        </dd>
      </dl>
      <dl>
        <dt><img src="@/assets/mian.png"></dt>
        <dd>
          <h4>田园面馆（秦观岛店）<span>外卖</span></h4>
          <p>45分钟送达</p>
          <p>起送价￥38|配送费￥0 <i>x</i><span>月售8203</span></p>
          <p>折扣商品6折起</p>
        </dd>
      </dl>
      <dl style="border-bottom:none;">
        <dt><img src="@/assets/mian.png"></dt>
        <dd>
          <h4>田园面馆（秦观岛店）<span>外卖</span></h4>
          <p>45分钟送达</p>
          <p>起送价￥38|配送费￥0 <i>x</i><span>月售8203</span></p>
          <p>折扣商品6折起</p>
        </dd>
      </dl>
       <dl style="border-bottom:none;">
        <dt><img src="@/assets/mian.png"></dt>
        <dd>
          <h4>田园面馆（秦观岛店）<span>外卖</span></h4>
          <p>45分钟送达</p>
          <p>起送价￥38|配送费￥0 <i>x</i><span>月售8203</span></p>
          <p>折扣商品6折起</p>
        </dd>
      </dl>
       <dl style="border-bottom:none;">
        <dt><img src="@/assets/mian.png"></dt>
        <dd>
          <h4>田园面馆（秦观岛店）<span>外卖</span></h4>
          <p>45分钟送达</p>
          <p>起送价￥38|配送费￥0 <i>x</i><span>月售8203</span></p>
          <p>折扣商品6折起</p>
        </dd>
      </dl>
       <dl style="border-bottom:none;">
        <dt><img src="@/assets/mian.png"></dt>
        <dd>
          <h4>田园面馆（秦观岛店）<span>外卖</span></h4>
          <p>45分钟送达</p>
          <p>起送价￥38|配送费￥0 <i>x</i><span>月售8203</span></p>
          <p>折扣商品6折起</p>
        </dd>
      </dl>
    </div>
  </div>
  
</template>

<script>
export default {

}
</script>

<style scoped lang="less">
.sy{
  height: 3000px;
}
.hed {
  height: 5.85rem;
  background: url(../assets/bj.png) no-repeat;
  background-size: cover;
  select {
    border: none;
    font-size: 0.5rem;
    color: #fff;
    background: #0096ff;
    margin-left: 0.38rem;
  }
  input{
    margin:0.4rem 0.38rem;
    line-height: 1rem;
    width: 60%;
    border-radius: 3px;
    padding-left:30%; 
  }
}
.nav{
  ul{
    li{
      float: left;
      width: 20%;
      text-align: center;
      img{
        width: 70%;
      }
      p{
        font-size: 0.3rem;
      }
    }
  }
}
.zi{
  clear: both;
  margin: 4.5rem 0.7rem 0;
  dl{
    display: flex;
    dd{
      flex: 6.9rem;
      h4{
        font-size: 0.34rem;
        color: #ccc9c4;
        margin-top: 0.3rem;
        margin-bottom:0.1rem; 
      }
      h2{
        font-size: 0.5rem;
      }
    }
    dt{
      flex: 1.7rem;
      img{
        width: 1.95rem;
        height: 1.85rem;
        padding-left: 0.2rem;
      }
    }
  }
}
.hint{
          text-align: center;
          font-size: 0.34rem;
          color: #969495;
          margin-top:0.12rem;
          line-height: 1.16rem;
          border-top: 1px solid #dfdfdf; 
          background: #fff;
        }
.merchant{
          background: #fff;
          margin-bottom:1.53rem; 
          dl{
            display: flex;
            margin: 0 0.3rem;
            padding: 0.45rem 0;
            border-bottom:1px solid #e5e5e5; 
            dt{
              img{
                width: 2.4rem;
                height: 2.4rem;
              }
            }
            dd{
              padding-left:0.36rem;
              width: 100%; 
              h4{
                font-size:0.4rem ;
                font-weight: bold;
                padding-top:0.1rem; 
                span{
                  display:inline-block;
                  margin-left:0.4rem ;
                  width: 0.77rem;
                  height: 0.32rem;
                  background: linear-gradient(#ffd269,#ffb11a);
                  font-size: 0.26rem;
                  padding-top:0.1rem; 
                  text-align: center;
                }
              }
              p:nth-child(2){
                padding-top:0.44rem;
                font-size: 0.33rem;
                color: #606060;
                letter-spacing: 0.02rem;
              }
              p:nth-child(3){
                padding-top:0.4rem;
                font-size: 0.33rem;
                color: #606060;
                span{
                  float: right;
                  letter-spacing: 0rem;
                }
                i{
                    float: right;
                    width: 0.45rem;
                    height:0.36rem;
                    display: block;
                    border:1px solid #f0f0f0;
                    border-radius:0.16rem;
                    text-align: center;
                    line-height: 0.36rem;
                    font-size: 0.16rem;
                    margin-left:0.24rem; 
                    margin-right:0.4rem; 
                  }
              }
              p:nth-child(4){
                width:2.46rem ;
                height: 0.43rem;
                font-size: 0.3rem;
                margin-top: 0.34rem;
                text-align: center;
                display: block;
                padding-top: 0.14rem;
                background: #fff5f5; 
                border:0.01rem solid #e5dad8;
                color:#f95249;
                border-radius:0.2rem; 
              }
            }
          }
        }
</style>
